<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <div
          class="width_96 padding_15 border_bottom display_flex align_items_center"
        >
          <el-page-header
            class="flex_1"
            @back="goBack"
            title=""
            :content="content"
          ></el-page-header>
          <div v-if="content == '编辑成员'">
            <el-button
              class="button_span"
              type="primary"
              plain
              @click="particulars"
              >详情</el-button
            >

            <el-button type="primary" plain @click="equipment"
              >绑定设备</el-button
            >
            <el-button type="primary" plain @click="del_reset(2)"
              >重置密码</el-button
            >
            <el-button type="primary" plain @click="del_reset(3)"
              >禁用</el-button
            >
            <el-button type="danger" plain @click="del_reset(1)"
              >删除</el-button
            >
          </div>
        </div>
        <el-form
          :rules="rules"
          :model="form"
          ref="form"
          class="width_96 demo-ruleForm"
          label-width="130px"
        >
          <el-row>
            <el-col :span="12">
              <el-row class="width_100">
                <el-col :span="20">
                  <el-form-item label="员工昵称：" prop="name">
                    <el-input
                      placeholder="请输入员工昵称"
                      v-model="form.name"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="真实姓名：" prop="name">
                    <el-input
                      placeholder="请输入真实姓名"
                      v-model="form.name"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="选择性别： " prop="name">
                    <el-radio v-model="form.gender" label="1">男</el-radio>
                    <el-radio v-model="form.gender" label="2">女</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" class="text_align_center margin_top_10">
              <div class="father_box">
                <div v-if="imageUrl" class="item_box">
                  <i @click="see_icon" class="el-icon-zoom-in"></i>
                  <i @click="del_icon" class="el-icon-delete"></i>
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <el-image v-if="imageUrl" :src="imageUrl" class="avatar" />

                  <img
                    v-else
                    src="../../assets/images/organization/pic_4.png"
                    class="avatar"
                    alt=""
                  />
                </el-upload>
              </div>
              <span class="font_size_12 color_A3A3A3"
                >请上传jpg/png格式图片图片大小不超过2M</span
              >
            </el-col>
          </el-row>
          <el-dialog title="查看图片" width="50%" :visible.sync="imgStatus">
            <img :src="see_imgUrl" class="width_100" alt="" />
          </el-dialog>
          <div class="xx"></div>
          <el-row>
            <el-col :span="10">
              <el-form-item label="成员手机：" prop="name">
                <el-input
                  placeholder="请输入成员手机"
                  v-model="form.phone"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="设置密码：" prop="name">
                <el-input
                  placeholder="请设置密码"
                  v-model="form.pwa"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="员工工号：" prop="name">
                <el-input
                  placeholder="请输入员工工号"
                  v-model="form.pwa"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="归属部门：" prop="name">
                <el-cascader
                  style="width: 100%"
                  :options="options"
                  :props="{ multiple: true }"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="员工职位：" prop="name">
                <el-button type="text" @click="Add_work">去设置</el-button>
                <el-select
                  v-if="false"
                  style="width: 100%"
                  v-model="form.position"
                  placeholder="请选择"
                >
                  <el-option label="收银" value="1"> </el-option>
                  <el-option label="迎宾" value="1"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="部门负责人：" prop="name">
                <el-radio v-model="form.principal" label="1">是</el-radio>
                <el-radio v-model="form.principal" label="2">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="xx"></div>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    style="margin-bottom: 10px"
                    label="收银票据："
                    prop="name"
                  >
                    <el-switch
                      v-model="form.note"
                      active-value="1"
                      inactive-value="2"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="收银系统名称：">
                    <el-input
                      placeholder="请输入收银系统名称"
                      v-model="form.bank_name"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="收银系统账号：">
                    <el-input
                      placeholder="请输入收银系统账号"
                      v-model="form.System_account"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div class="width_90 text_align_center">
                <img
                  style="width: 276px; height: 247px"
                  src="../../assets/images/menu/addchengyuan.png"
                  class="width_90 margin_top_20"
                  alt=""
                />
              </div>
            </el-col>
            <el-row>
              <el-col :span="20">
                <div class="button_">
                  <el-button class="button_span" @click="add">保存</el-button>
                  <el-button class="button_span" @click="cancel"
                    >取消</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <div class="box_height"></div>

    <el-dialog
      title="选择成员所在部门"
      class="ee_box"
      :visible.sync="dialogVisible"
      :show-close="false"
      width="50%"
    >
      <div class="width_100">
        <el-row class="width_90">
          <el-col :span="12">
            <div class="e_box_left">
              <div class="width_90 text_align_center margin_top_20">
                <el-input
                  placeholder="搜索部门"
                  prefix-icon="el-icon-search"
                ></el-input>
              </div>
              <div class="width_96" style="max-height: 340px; overflow: auto">
                <el-tree
                  class="tree_list margin_top_10"
                  :data="treeData"
                  node-key="ida"
                  default-expand-all
                  :expand-on-click-node="false"
                  @node-click="pop_node_click"
                >
                  <span class="custom-tree-node" slot-scope="{ node }">
                    <img :src="icon_1" class="tree_icon" alt="" />
                    <div
                      style="flex: 1; text-align: left"
                      class="margin_left_10"
                    >
                      <span>{{ node.label }}</span>
                    </div>
                  </span>
                </el-tree>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="e_box_right">
              <div class="width_90 margin_top_20">已选择的部门</div>

              <div
                class="width_96 margin_top_10"
                style="max-height: 330px; overflow: auto"
              >
                <div
                  class="width_90 display_flex align_items_center padding_6 background_DDEDFF"
                  v-for="(item, index) in SetDepartment"
                  :key="item.id"
                >
                  <img :src="icon_1" class="tree_icon" alt="" />
                  <div class="flex_1 margin_left_10">{{ item.label }}</div>
                  <div class="icon_2" @click="pop_node_del_click(index)">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="btn_group">
        <el-button class="btn_no" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button class="btn_yes" @click="dialogVisible = false"
          >保 存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="选择成员所在部门"
      class="ee_box"
      :visible.sync="drawer_status"
      :show-close="false"
      width="50%"
    >
      <div class="width_90 margin_top_10">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
      </div>
      <div class="width_90" style="height: 340px; overflow: auto">
        <el-tree
          class="tree_list margin_top_10"
          :data="treeData"
          node-key="ida"
          default-expand-all
          :expand-on-click-node="false"
          show-checkbox
          @node-click="pop_node_click"
        >
          <span class="custom-tree-node" slot-scope="{ node }">
            <img :src="icon_1" class="tree_icon" alt="" />
            <div style="flex: 1; text-align: left" class="margin_left_10">
              <span>{{ node.label }}</span>
            </div>
          </span>
        </el-tree>
      </div>
      <div class="width_90">
        <div class="btn_group">
          <el-button class="btn_no" @click="drawer_status = false"
            >取 消</el-button
          >
          <el-button class="btn_yes" @click="drawer_status = false"
            >保 存</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="设置结算成本"
      class="ee_box"
      :visible.sync="set_chengben_status"
      :show-close="false"
      width="90%"
    >
      <div class="width_90">
        <div class="display_flex align_items_center">
          <div>*结算成本：</div>
          <div
            class="select_bm"
            v-for="(item, index) in SetDepartment"
            :key="item.id"
          >
            <span>{{ item.label }}</span>
            <i @click="pop_node_del_click(index)" class="el-icon-error"></i>
          </div>
        </div>
      </div>
      <div class="width_90">
        <el-table :data="tableData" style="width: 100%; height: 400px">
          <el-table-column prop="date" label="序号"></el-table-column>
          <el-table-column prop="name" label="通道名称"></el-table-column>
          <el-table-column
            prop="address"
            label="支付宝费率(%)"
          ></el-table-column>
          <el-table-column prop="address" label="微信费率(%)"></el-table-column>
          <el-table-column
            prop="address"
            label="银联借记卡(≤1000元)费率(%)"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="银联借记卡(＞1000元)费率(%)"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="银联借记卡封顶额(元)"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="银联贷记卡(≤1000元)费率(%)"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="银联贷记卡(＞1000元)费率(%)"
          ></el-table-column>
          <el-table-column prop="address" label="操作"></el-table-column>
        </el-table>
      </div>
      <div class="btn_group">
        <el-button class="btn_no" @click="set_chengben_status = false"
          >取 消</el-button
        >
        <el-button class="btn_yes" @click="set_chengben_status = false"
          >保 存</el-button
        >
      </div>
    </el-dialog>
    <!-- 绑定设备列表 -->
    <el-dialog title="设备绑定" :visible.sync="equipmentVisible" width="80%">
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="list"
        class="margin_top_10"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="date" label="设备SN编号"></el-table-column>
        <el-table-column prop="date" label="设备型号"></el-table-column>
        <el-table-column prop="date" label="设备用途"></el-table-column>
        <el-table-column prop="date" label="查看照片">
          <template slot-scope="scope"
            ><el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            ></template
          >
        </el-table-column>
        <el-table-column prop="store" label="状态">
          <template slot-scope="scope">
            {{ scope.row.store == 1 ? "已绑定" : "未绑定" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.store == 2"
              type="text"
              size="small"
              @click="relevancy(1)"
              >绑定</el-button
            >
            <el-button
              v-if="scope.row.index == 1"
              type="text"
              size="small"
              @click="relevancy(2)"
              >解绑</el-button
            >
            <el-button
              v-if="scope.row.index == 2"
              type="text"
              size="small"
              @click="relevancy(3)"
              >设备联动</el-button
            >
            <el-button
              v-if="scope.row.index == 1"
              type="text"
              size="small"
              @click="relevancy(4)"
              >解除联动</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="equipmentVisible = false">取 消</el-button>
        <el-button type="primary" @click="equipmentVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 设备绑定 -->
    <el-dialog
      :title="title"
      :visible.sync="equipmentVisible1"
      width="30%"
      center
      @close="resetForm(1)"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备类型：" prop="sty">
          <el-input disabled style="100px" v-model="ruleForm.sty"></el-input>
        </el-form-item>
        <el-form-item label="设备型号：" prop="model">
          <el-input disabled style="100px" v-model="ruleForm.model"></el-input>
        </el-form-item>
        <el-form-item
          v-if="title == '设备绑定'"
          label="设备SN码："
          prop="sn_data"
        >
          <el-input
            style="100px"
            placeholder="请输入设备sn编号"
            v-model="ruleForm.sn_data"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="title == '解绑联动' || title == '设备联动'"
          label="云喇叭："
          prop="trumpet"
        >
          <el-select v-model="ruleForm.trumpet" placeholder="请选择">
            <el-option label="云喇叭" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="title == '解绑联动'">
          <div style="font-size: 12px; color: #ff3131">
            解除联动后收单设备收款成功后将不在云喇叭设备上同步播放
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm(1)">取 消</el-button>
        <el-button
          v-if="title == '解绑联动'"
          type="primary"
          @click="SubmitForm(1)"
          >确 定</el-button
        >
        <el-button
          v-if="title == '设备联动'"
          type="primary"
          @click="SubmitForm(2)"
          >确 定</el-button
        >
        <el-button
          v-if="title == '设备绑定'"
          type="primary"
          @click="SubmitForm(3)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加职务 -->
    <el-dialog
      title="新增职务"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      @close="handleDialogClose"
    >
      <el-form :model="taskFrom" :rules="taskRules" ref="taskFrom">
        <el-form-item label="职务名称：" prop="name">
          <el-input v-model="taskFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="职务描述：" prop="describe">
          <el-input
            type="textarea"
            :rows="2"
            maxlength="50"
            show-word-limit
            v-model="taskFrom.describe"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox-group v-model="checkList">
            <div
              class="width_100"
              v-for="(item, index) in treelist"
              :key="index"
            >
              <el-row>
                <el-col :span="24" class="title">
                  <el-checkbox
                    :label="item.id"
                    @change="checked => checkboxFun(checked, item)"
                    :data-id="item.id"
                    :checked="item.checked == 1 ? true : false"
                    >{{ item.title }}</el-checkbox
                  >
                  {{ item.title }}
                </el-col>
              </el-row>
              <el-row>
                <el-col
                  v-for="(items, key) in item.child"
                  :span="4"
                  class="content"
                  :key="key"
                  style="margin-right: 2 0px"
                >
                  <el-checkbox
                    :label="items.id"
                    :checked="items.checked == 1 ? true : false"
                    >{{ items.title }}</el-checkbox
                  >
                </el-col>
              </el-row>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  get,
  post,
  formatterCellval,
  pickerOptions,
  tipsFun
} from "../../util/request.js"
import { icon_1 } from "../../util/icon.js"
export default {
  name: "",
  data () {
    var treeData = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      }
    ]
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
          data: {
            key: i,
            label: `备选项 ${i}`,
            disabled: i % 4 === 0
          }
        })
      }
      return data
    }
    return {
      see_imgUrl: "",
      imgStatus: false,
      // 职务数组
      treelist: [
        {
          id: 367,
          parent_id: 0,
          title: "客户管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 2,
          status: 1,
          is_wx_menu: null,
          checked: 1,
          child: [
            {
              id: 368,
              parent_id: 367,
              title: "公海客户",
              icon: "ghkh",
              path: "highSeasCustomList",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 369,
              parent_id: 367,
              title: "私海客户",
              icon: "shkh",
              path: "privateSeaList",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 375,
              parent_id: 367,
              title: "市场回访",
              icon: "schf",
              path: "kh_FollowupList",
              is_menu: 1,
              sort: 3,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 370,
              parent_id: 367,
              title: "拜访计划",
              icon: "bfjh",
              path: "visitList",
              is_menu: 1,
              sort: 4,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 371,
              parent_id: 367,
              title: "客户拜访",
              icon: "khbf",
              path: "kh_visitList",
              is_menu: 1,
              sort: 5,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 374,
              parent_id: 367,
              title: "银行代表",
              icon: "yhdb",
              path: "bank_peopleList",
              is_menu: 1,
              sort: 6,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 373,
              parent_id: 367,
              title: "银行拜访计划",
              icon: "yhbfjh",
              path: "bank_visitPlanList",
              is_menu: 1,
              sort: 7,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 372,
              parent_id: 367,
              title: "银行拜访",
              icon: "yhbf",
              path: "bank_visitList",
              is_menu: 1,
              sort: 8,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 420,
              parent_id: 367,
              title: "银行回访",
              icon: "yhhf",
              path: "bank_FollowupList",
              is_menu: 1,
              sort: 10,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        }
      ],
      // 添加职务用的数据
      taskFrom: {
        name: "",
        describe: ""
      },
      taskRules: {
        name: [
          { required: true, message: "请输入职务名称：", trigger: "blur" }
        ],
        describe: [
          { required: true, message: "请输入职务描述", trigger: "blur" }
        ]
      },
      checkList: [],
      options: [
        {
          value: 1,
          label: "东南",
          children: [
            {
              value: 2,
              label: "上海",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" }
              ]
            }
          ]
        }
      ],
      icon_1: icon_1,
      treeData: JSON.parse(JSON.stringify(treeData)),
      formatterCellval,
      filterText: "",
      time: "",
      pickerOptions,
      input2: "",
      currentPage: 1,
      pageTotal: 0,
      rules: {
        name: [{ required: true, message: "请输入员工呢称", trigger: "blur" }]
      },
      form: {
        radio: 3
      },
      // 设备列表
      list: [
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "1"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "1"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "2"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "2"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "1"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "2"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "1"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "2"
        }
      ],
      // 绑定设备弹窗标题
      title: "",
      //绑定设备
      rules: {
        sty: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
        model: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
        sn_data: [
          {
            required: true,
            message: "请输入设备sn编码",
            trigger: "blur"
          }
        ],
        trumpet: [
          { required: true, message: "请选择联动设备", trigger: "blur" }
        ]
      },
      ruleForm: {
        sty: "111",
        model: "111",
        trumpet: ""
      },
      form: {},
      // 绑定设备
      sub_title: "",
      dialogVisible: false,
      value: "",
      data: generateData(),
      generateValue: [1, 4],
      imageUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      SetDepartment: [],
      drawer_status: false,
      direction: "rtl",
      equipmentVisible: false,
      // 控制绑定设备的弹窗
      equipmentVisible1: false,
      // 绑定设备form表单
      submitForm: {},
      centerDialogVisible: false,
      //结算成本
      set_chengben_status: false,
      tableData: [],
      content: ""
    }
  },

  mounted () {
    if (this.$route.params.id) {
      localStorage.setItem("key", this.$route.params.id)
    }
    console.log(localStorage.getItem("key"))
    if (localStorage.getItem("key")) {
      this.content = "编辑成员"
    } else {
      this.content = "添加成员"
    }
  },
  methods: {
    del_icon () {
      this.imageUrl = ""
      console.log("删除照片")
    },
    see_icon () {
      this.imgStatus = true
      this.see_imgUrl = this.imageUrl
    },
    // 选中职务
    checkboxFun (options_1, options_2) {
      if (options_1 == true) {
        var arr = []
        var that = this
        options_2.child.forEach(function (data) {
          arr.push(data.id)
        })
        this.checkList = Array.from(new Set(this.checkList.concat(arr)))
      } else {
        var arr = []
        options_2.child.forEach(function (data) {
          arr.push(data.id)
        })

        this.checkList.forEach((data_1, index_1) => {
          arr.forEach(data_2 => {
            if (data_1 == data_2) {
              delete this.checkList[index_1]
            }
          })
        })
        this.checkList = this.checkList.filter(s => {
          return s
        })
      }
    },
    // 监听弹窗关闭
    handleDialogClose () {
      this.centerDialogVisible = false
      this.checkList = []
      this.$refs.taskFrom.resetFields()
    },
    // 添加职务
    Add_work () {
      this.centerDialogVisible = true
    },
    // 确认绑定
    SubmitForm () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(111)
          this.equipmentVisible1 = false
        }
      })
    },
    // 绑定设备、联动
    relevancy (val) {
      if (val == 1) {
        this.equipmentVisible1 = true
        this.title = "设备绑定"
      } else if (val == 2) {
        this.$confirm("解绑后，本商户将无法使用该设备", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "解绑成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消解绑"
            })
          })
      } else if (val == 3) {
        console.log(111)
        this.title = "设备联动"
        this.equipmentVisible1 = true
      } else {
        console.log(222)
        this.title = "解绑联动"
        this.equipmentVisible1 = true
      }
    },
    // 绑定设备
    equipment () {
      this.equipmentVisible = true
    },
    // 绑定设备下的解绑绑定...
    del_reset (value) {
      if (value == 1) {
        this.$confirm("确定删除所选组织层级？", "提示", {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "error",
          center: true
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          })
          .catch(() => {
            this.$message({
              message: "删除已取消"
            })
          })
      } else if (value == 2) {
        this.$confirm("该成员密码会被重置为手机号后六位", "提示", {
          confirmButtonText: "确定重置",
          cancelButtonText: "取消",
          type: "error",
          center: true
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "重置成功!"
            })
          })
          .catch(() => {
            this.$message({
              message: "重置已取消"
            })
          })
      } else {
        this.$confirm("禁用后，该员工无法登录乐易呗平台", "提示", {
          confirmButtonText: "确定禁用",
          cancelButtonText: "取消",
          type: "error",
          center: true
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "禁用成功!"
            })
          })
          .catch(() => {
            this.$message({
              message: "禁用已取消"
            })
          })
      }
    },
    // 重置设备添加的表单
    resetForm (val) {
      if (val == 1) {
        this.$refs.ruleForm.resetFields()
        this.equipmentVisible1 = false
      }
    },
    // 点击编辑和详情
    particulars (val) {
      console.log("点击详情")
      this.$router.push({
        name: "jobdetails",
        params: {
          id: 11
        }
      })
    },
    add () {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert("submit!")
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    cancel () {
      this.$refs.form.resetFields()
      this.$router.go(-1)
    },
    commandFn (res, e) {
      console.log(res, e)
      if (res == "add") {
        this.sub_title = "新增部门"
        this.dialogVisible = true
      } else if (res == "edit") {
        this.sub_title = "修改部门"
        this.dialogVisible = true
      } else if (res == "del") {
        console.log(res, e)
        this.$confirm("确定删除" + e.label + "部门？", "删除部门", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            })
          })
      }
    },
    treeClickFn () {},
    //分润比例
    handleChange () {},
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    sz_generate_FUN () {
      this.dialogVisible = true
    },
    filterNode (res) {
      console.log(res)
    },
    pop_node_click (res) {
      var str = false
      this.SetDepartment.forEach(data => {
        if (data.id == res.id) {
          tipsFun(this, "error", "已存在")
          str = true
        }
      })
      if (!str) {
        this.SetDepartment.push(res)
      }
    },
    pop_node_del_click (index) {
      this.SetDepartment.splice(index, 1)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    goBack () {},
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped="true">
.item_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  z-index: 111;
}
.father_box {
  position: relative;
}
.button_span {
  width: 103px;
  height: 37px;
  background: #3f75ff;
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}
.button_ {
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
}
.tree_list >>> .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree_list >>> .el-tree-node__content:hover {
  background-color: #ecf2fe !important;
}

.list >>> .font_size_26 {
  font-size: 22px;
}

.list >>> .tab_title {
  font-size: 12px;
  color: #0067d9;
}

.list >>> .tab_title div {
  margin-right: 10px;
}

.small_box >>> .list {
  padding: 10px 0;
}

.box {
  padding: 10px;
  border-radius: 6px;
  background-color: rgba(236, 242, 254, 1);
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px !important;
  margin-top: 10px !important;
}

.el-form-item__content {
  margin-left: 0px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  line-height: 98px;
  text-align: center;
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
}

.avatar {
  width: 98px;
  height: 98px;
  display: block;
}

.select_bm {
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid #f5f5f5;
  color: #575757;
  margin-right: 10px;
  background: #ddedff;
}

.select_bm i {
  color: #d9d9d9;
}

.e_box_left {
  border-right: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  height: 400px;
}

.e_box_right {
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  height: 400px;
}

.ee_box >>> .el-dialog__body {
  padding: 0 !important;
}

.tree_icon {
  width: 14px;
  height: 14px;
}

.icon_2 {
  font-size: 16px;
}

.background_DDEDFF {
  background: #ddedff;
  margin-top: 10px;
  border-radius: 8px;
}
</style>
